<!-- 搜索表单 -->
<template>
  <a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
    <!-- 表格 -->
    <ele-pro-table ref="containerBillProcessTableRef" row-key="id" :columns="columns" :datasource="datasource" 
      :scroll="{ x: 1000 }" :needPage="false">
      <!-- <template #toolbar>
        <a-space>
          <a-button type="primary" @click="containerBillProcessOpenEdit()"
            v-any-permission="['order:containerBillProcess:save']">
            <template #icon>
              <plus-outlined />
            </template>
            <span>新建</span>
          </a-button>
        </a-space>
      </template> -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="containerBillProcessOpenEdit(record)"
              v-any-permission="['order:containerBillProcess:update']">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定要删除此项吗？" @confirm="containerBillProcessRemove(record)">
              <a class="ele-text-danger" v-any-permission="['order:containerBillProcess:remove']">删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </ele-pro-table>
  </a-card>
  <!-- 订单流程状态添加、修改弹窗 -->
  <ele-modal :width="460" v-model:visible="containerBillProcessVisible" :confirm-loading="containerBillProcessLoading"
    :title="containerBillProcessIsUpdate ? '修改订单流程状态' : '新建订单流程状态'" :body-style="{ paddingBottom: '8px' }"
    @ok="containerBillProcessSave" :maskClosable="false">
    <a-form ref="containerBillProcessFormRef" :model="containerBillProcessForm" :rules="containerBillProcessRules"
      :label-col="{ md: { span: 7 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 17 }, sm: { span: 24 } }">
      <a-form-item label="订单id" name="billId">
        <a-input allow-clear :maxlength="200" placeholder="请输入订单id" v-model:value="containerBillProcessForm.billId"
          autocomplete="off" />
      </a-form-item>
      <a-form-item label="状态" name="state">
        <a-input allow-clear :maxlength="200" placeholder="请输入状态" v-model:value="containerBillProcessForm.state"
          autocomplete="off" />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-input allow-clear :maxlength="200" placeholder="请输入备注" v-model:value="containerBillProcessForm.remark"
          autocomplete="off" />
      </a-form-item>
    </a-form> 
  </ele-modal>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { toDateString } from 'ele-admin-pro';
import useFormData from '@/utils/use-form-data';
import { message } from 'ant-design-vue';

import { pageContainerBillProcess, removeContainerBillProcess, addContainerBillProcess, updateContainerBillProcess } from '@/api/order/containerBillProcess';
const props = defineProps({
  // billId: String,
})

const emit = defineEmits(['processList']);

// 表格实例
const containerBillProcessTableRef = ref(null);

// 表格列配置
const columns = ref([
  {
    key: 'index',
    width: 48,
    align: 'center',
    fixed: 'left',
    hideInSetting: true,
    customRender: ({ index }) => index + (containerBillProcessTableRef.value?.tableIndex ?? 0)
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    // sorter: true,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    // sorter: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    // sorter: true,
    resizable: true,
    width: 150,
    ellipsis: true,
    customRender: ({ text }) => toDateString(text)
  },
  {
    title: '创建人',
    dataIndex: 'createName',
    key: 'createName',
    // sorter: true,
  },
  // {
  //   title: '更新时间',
  //   dataIndex: 'updateTime',
  //   key: 'updateTime',
  //   // sorter: true,
  //   resizable: true,
  //   width: 150,
  //   ellipsis: true,
  //   customRender: ({ text }) => toDateString(text)
  // },
  // {
  //   title: '更新人',
  //   dataIndex: 'updateName',
  //   key: 'updateName',
  //   // sorter: true,
  // },
  // {
  //   title: '操作',
  //   key: 'action',
  //   width: 200,
  //   align: 'center',
  //   fixed: 'right',
  //   hideInSetting: true
  // }
]);

// 表单数据
const { form: containerBillProcessWhere, resetFields } = useFormData({
  username: '',
  sex: undefined,
  billId: 0,
});

// 表格数据源
const datasource = async ({ page, limit, where, orders }) => {
  let data_temp = {}
  limit = 200
  await pageContainerBillProcess({ ...where, ...orders, page, limit }).then((msg) => {
    data_temp = msg
    emit('processList',data_temp)
  }).catch((e) => {
  });
  return new Promise((resolve) => {
    resolve(data_temp)
  })
};

// watch(() => props.billId, (val) => {
//   // 只监听父元素传来的billId参数，billId变化才会触发
//   containerBillProcessReload()
// })

/* 搜索 */
let billId = ref(0)
const containerBillProcessReload = (billId_s) => {
  billId.value = billId_s
  containerBillProcessWhere.billId = billId.value
  containerBillProcessTableRef?.value?.reload({ page: 1, where: containerBillProcessWhere });
};

defineExpose({containerBillProcessReload})

/*  重置 */
const containerBillProcessReset = () => {
  resetFields();
  containerBillProcessReload();
};

/* 删除单个 */
const containerBillProcessRemove = (record) => {
  const hide = message.loading('请求中..', 0);
  removeContainerBillProcess(record.id).then((msg) => {
    hide();
    message.success(msg);
    containerBillProcessReload();
  }).catch((e) => {
    hide();
    message.error(e.message);
  });
};

// 当前选中数据
const containerBillProcessCurrent = ref(null);

// 弹窗是否打开
const containerBillProcessVisible = ref(false);

// 是否是修改
const containerBillProcessIsUpdate = ref(false);

// 提交状态
const containerBillProcessLoading = ref(false);

//
const containerBillProcessFormRef = ref(null);

// 表单数据
const { form: containerBillProcessForm, resetFields: containerBillProcessResetFormFields } = useFormData({
  id: undefined,
  customer: '',
  vessel: '',
});

// 表单验证规则
const containerBillProcessRules = reactive({
  name: [
    {
      required: true,
      message: '请输入名称',
      type: 'string',
    }
  ],
});

/* 打开编辑弹窗 */
const containerBillProcessOpenEdit = (record) => {
  if (billId.value == 0) {
    message.error('请选择一条运单');
    return
  }
  containerBillProcessResetFormFields();
  containerBillProcessFormRef.value?.clearValidate();
  containerBillProcessCurrent.value = record?? {};
  containerBillProcessVisible.value = true;
  Object.assign(containerBillProcessForm, record ?? {});
  containerBillProcessForm.billId = billId.value
  containerBillProcessIsUpdate.value = !!record;
};

/* 保存编辑 */
const containerBillProcessSave = () => {
  if (!containerBillProcessFormRef.value) {
    return;
  }
  containerBillProcessFormRef.value.validate().then(() => {
    containerBillProcessLoading.value = true;
    const saveOrUpdate = containerBillProcessIsUpdate.value ? updateContainerBillProcess : addContainerBillProcess;
    saveOrUpdate(containerBillProcessForm).then((msg) => {
      containerBillProcessLoading.value = false;
      message.success(msg);
      containerBillProcessVisible.value = false;
      containerBillProcessReload();
    }).catch((e) => {
      containerBillProcessLoading.value = false;
      message.error(e.message);
    });
  }).catch(() => {
  });
};
</script>

<style lang="less" scoped>  
</style>
